<template>
    <div class="action_contnet">
        <panle title='用户信息' content="用户信息列表"></panle>
        <!--筛选条件-->
        <div class="shaixuan3">
            <div style="display: flex;flex-direction: column;">
                <div style="margin:20px">
                    <span style="padding: 0 10rem 0 0;">邀约：{{ yaoyueNum }} 人</span>
                    <span style="padding: 0 10rem;">到课：{{ daokeNum }} 人</span>
                    <span style="padding: 0 10rem;">未到课：{{ weidaokeNum }} 人</span>
                </div>
                <div style="margin:20px">
                    <span style="padding: 0 10rem 0 0;">目前在线：{{ zaixianNum }} 人</span>
                    <span style="padding: 0 10rem 0 8rem;">已成交：{{ yichengjiaoNum }} 人</span>
                    <span style="padding: 0 10rem 0 9rem;">提单未付款：{{ weifukuanNum }} 人</span>
                </div>
            </div>
            <div class="daohang_content">
                <PersButton type="text" size="mini" icon="el-icon-goback" label="返回上一页" @click="goback"></PersButton>
            </div>
            <div style="margin-top: 15px;">
                <el-select v-model="online" placeholder="是否在线" @change="onlinechange" style="margin-left: 10px;width: 130px;">
                    <el-option
                        v-for="item in onlines"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="daoke" placeholder="是否到课" @change="onlinechange" style="margin-left: 10px;width: 130px;">
                    <el-option
                        v-for="item in daokes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="zhifu" placeholder="是否支付" @change="onlinechange" style="margin-left: 10px;width: 130px;">
                    <el-option
                        v-for="item in zhifus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="weizhifu" placeholder="提单未支付" @change="onlinechange" style="margin-left: 10px;width: 130px;">
                    <el-option
                        v-for="item in weizhifus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button style="margin-left: 20px;"    @click="resetForm('searchinput')">重置</el-button>
                <PersButton type="text" size="mini" icon="el-icon-refresh" perms="sys:role:del" label="刷新" @click="refresh()"></PersButton>
            </div>
            <div class="first_table">
                <el-table align="center" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all v-loading="loading">
                    <el-table-column align="center" fixed  width="55" label="序号"  prop="id"></el-table-column>
                    <el-table-column  align="center" fixed header-align="center" prop="wx_avatarurl" width="100" label="用户头像">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" fixed header-align="center" prop="nickname"  width="150" label="用户昵称"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="phone"  width="150"  label="手机号"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="jieliangzhujiao" width="200" label="接量助教"> </el-table-column>
                    <el-table-column align="center"  header-align="center" prop="yaoqingzhujiao"  width='250' label="直播邀请助教"></el-table-column>
                    <el-table-column align="center"  header-align="center" width='150' prop="signin_status" label="是否到课">
                        <template slot-scope="scope">
                            <span >
                                {{ scope.row.signin_status > 0 ? '是' : '否' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  header-align="center" width='150' prop="online_status" label="直播间在线">
                        <template slot-scope="scope">
                            <span >
                                {{ scope.row.online_status == 1 ? '在线' : '离线' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  header-align="center" prop="zaixian_shichang" width='250'  label="累计在线时长"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="dianji_xiangqing" width='250' label="商品点击详情">
                        <template slot-scope="scope">
                            <span style="font-size: 8pt;">{{ scope.row.typename=='-' ? '-' :scope.row.typename+'-' }}</span>
                            <el-button size="mini" type="default" @click="dianji_xiangqing_click(scope.row)">明细</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  header-align="center" prop="shijian"  width='250' label="提单未付款">
                        <template slot-scope="scope">
                            {{ scope.row.shijian=='-' ? '-' :scope.row.shijian+'-' }}
                            <el-button size="mini" type="default" @click="dianji_xiangqing_click(scope.row)">明细</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"   header-align="center" prop="payorder"  width='250' label="课程购买记录">
                        <template slot-scope="scope">
                            {{ scope.row.payorder=='-' ? '-' :scope.row.payorder+'-' }}
                            <el-button size="mini" type="default" @click="payorder_click(scope.row)">明细</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  header-align="center" prop="_id" width='250' label="操作">
                        <template slot-scope="scope">
                            <PersButton type="text" size="mini" icon="fa  fa-pencil" perms="live:attendance:pingLun" label="查看评论" @click="chakan(scope.row)"></PersButton>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    
    import Panle from '@/components/Panle';
    import { yaoyueDaokeUser } from '@/api/live/attendance';
    import PersButton from '@/components/PersButton';

    export default {
        components:{
            Panle,
            PersButton
        },
        data(){
            return {
                dianji_xiangqing:'',
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                yaoyueNum:0,
                daokeNum:0,
                weidaokeNum:0,
                zaixianNum:0,
                yichengjiaoNum:0,
                weifukuanNum:0,
                tableData:[],
                loading: false,
                multipleSelectioncount: 0,
                online:'',
                daoke:'',
                zhifu:'',
                weizhifu:'',
                onlines: [
                    {
                    value: 1,
                    label: '是'
                    }, {
                    value: 0,
                    label: '否'
                    }
                ],
                daokes: [
                    {
                    value: 1,
                    label: '到课'
                    }, {
                    value: 0,
                    label: '未到课'
                    }
                ],
                zhifus: [
                    {
                    value: 1,
                    label: '支付'
                    }, {
                    value: 0,
                    label: '未支付'
                    }
                ],
                weizhifus: [
                    {
                    value: 1,
                    label: '提单未付款'
                    }, {
                    value: 0,
                    label: '无'
                    }
                ],
            }
        },
        created(){
            this.init();
        },
        activated() {
            this.init();
        },
        methods: {
            refresh(e){
                this.init();
            },
            resetForm(formName) {
                this.online = '';
                this.daoke = '';
                this.zhifu = '';
                this.weizhifu = '';
                this.init();
            },
            init(){
                let _param = {
                    liveId:this.$route.query.liveId,
                    tutorId:this.$route.query.tutorId,
                    sender:this.$route.query.sender,
                    online:this.online,
                    daoke:this.daoke,
                    zhifu:this.zhifu,
                    weizhifu:this.weizhifu,
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber
                }

                yaoyueDaokeUser(_param).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.list;
                        this.total = res.data.total;
                        this.yaoyueNum = res.data.yaoyueNum;
                        this.daokeNum = res.data.daokeNum;
                        this.weidaokeNum = res.data.weidaokeNum;
                        this.zaixianNum = res.data.zaixianNum;
                        this.yichengjiaoNum = res.data.yichengjiaoNum;
                        this.weifukuanNum = res.data.weifukuanNum;
                    } else {
                        this.msgError(res.msg);
                    }
                })

            },
            handleSizeChange (e) {
                console.log(e);
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange (e) {
                console.log(e);
                this.pageNumber = e;
                this.init();
            },
            onlinechange(e){
                this.init();
            },
            goback() {
            this.$router.go(-1);
            },
            chakan:function(e){
                if (e.live_user_id == '') {
                    e.live_user_id = 0;
                }
                this.$router.push({ path: '/live/pingLun', query: { liveId: this.$route.query.liveId,live_user_id: e.live_user_id} });

            },
            yaoqingzhujiao(e){
                this.$router.push({ path: '/live/YaoQingDetail', query: { liveId: this.$route.query.liveId,live_user_id: e.live_user_id} });
            },
            dianji_xiangqing_click:function(e){
                if (e.live_user_id == '') {
                    e.live_user_id = 0;
                }
                this.$router.push({ path: '/live/userinfodetail', query: { liveId: this.$route.query.liveId,live_user_id: e.live_user_id,tab:'paycourse','goback': location.href} });
            },
            payorder_click:function(e){
                if (e.live_user_id == '') {
                    e.live_user_id = 0;
                }
                this.$router.push({ path: '/live/userinfodetail', query: { liveId: this.$route.query.liveId,live_user_id: e.live_user_id,tab:'shijian',fliter:1,'goback': location.href} });
            }
        }
        
    }

</script>


<style lang="scss" scoped>
@import "@/assets/css/common.scss";
.yixuan {
    margin: 20px;
    color: #787878;
}
.el-select .el-input {
    width: 130px;
}
.daohang_content {
    margin-top: 10px;
}
</style>